<template>
  <div class="pos">
    <div>
        <el-row >
            <el-col :span='7' class="pos-order" id="order-list">
              <el-tabs>
                    <el-tab-pane label="点餐">
                      <el-table :data="tableData" border show-summary style="width: 100%" >
                          <el-table-column prop="goodsName" label="商品"  ></el-table-column>
                          <el-table-column prop="count" label="量" width="50"></el-table-column>
                          <el-table-column prop="price" label="金额" width="70"></el-table-column>
                          <el-table-column  label="操作" width="100" fixed="right">
                              <template slot-scope="scope">
                                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                              </template>
                          </el-table-column>
                      </el-table>
                      <div class="btnGroup">
                        <el-button type="warning" >挂单</el-button>
                        <el-button type="danger" @click="delAllGoods">删除</el-button>
                        <el-button type="success" @click="checkout">结账</el-button>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="挂单">
                    挂单
                    </el-tab-pane>
                    <el-tab-pane label="外卖">
                    外卖
                  </el-tab-pane>
              </el-tabs>
            </el-col>
            <!--商品展示-->
            <el-col :span="17">
              <div class="often-goods">
                  <div class="title">常用商品</div>
                  <div class="often-goods-list">
                      <ul>
                          <li v-for="(goods, index) in oftenGoods" :key="index" @click="addOrderList(goods)">
                              <span v-text="goods.goodsName"></span>
                              <span class="o-price" v-text="'￥'+ goods.price +'元'"></span>
                          </li>
                      </ul>
                  </div>
              </div>
              <div class="goods-type">
                  <el-tabs>
                      <el-tab-pane label="汉堡">
                        <ul class='cookList'>
                            <li v-for="(item, index) in type0Goods" :key="index" @click="addOrderList(item)">
                                <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                                <span class="foodName" v-text="item.goodsName"></span>
                                <span class="foodPrice" v-text="'￥' + item.price + '元'"></span>
                            </li>
                        </ul>
                      </el-tab-pane>
                      <el-tab-pane label="小食">
                        <ul class='cookList'>
                            <li v-for="(item, index) in type1Goods" :key="index" @click="addOrderList(item)">
                                <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                                <span class="foodName" v-text="item.goodsName"></span>
                                <span class="foodPrice" v-text="'￥' + item.price + '元'"></span>
                            </li>
                        </ul>
                      </el-tab-pane>
                      <el-tab-pane label="饮料">
                        <ul class='cookList'>
                            <li v-for="(item, index) in type2Goods" :key="index" @click="addOrderList(item)">
                                <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                                <span class="foodName" v-text="item.goodsName"></span>
                                <span class="foodPrice" v-text="'￥' + item.price + '元'"></span>
                            </li>
                        </ul>
                      </el-tab-pane>
                      <el-tab-pane label="套餐">
                        <ul class='cookList'>
                            <li v-for="(item, index) in type3Goods" :key="index" @click="addOrderList(item)">
                                <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                                <span class="foodName" v-text="item.goodsName"></span>
                                <span class="foodPrice" v-text="'￥' + item.price + '元'"></span>
                            </li>
                        </ul>
                      </el-tab-pane>
                  </el-tabs>
              </div>
            </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'Pos',
  data () {
    return {
      totalCount: 0,
      totalMoney: 0,
      tableData: [],
      oftenGoods:[],
      type0Goods:[],
      type1Goods:[],
      type2Goods:[],
      type3Goods:[]
    }
  },
  methods: {
    addOrderList(goods) {
      this.totalCount=0; //汇总数量清0
      this.totalMoney=0;
      let isHave=false;
      //判断是否这个商品已经存在于订单列表
      for (let i=0; i<this.tableData.length;i++){
          if(this.tableData[i].goodsId==goods.goodsId){
              isHave=true; //存在
          }
      }
      //根据isHave的值判断订单列表中是否已经有此商品
      if(isHave){
          //存在就进行数量添加
            let arr = this.tableData.filter(o =>o.goodsId == goods.goodsId);
            arr[0].count++;
            //console.log(arr);
      }else{
          //不存在就推入数组
          let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
            this.tableData.push(newGoods);

      }

      this.getAllMoney();
    },
    //汇总数量和金额
    getAllMoney(){
        this.totalCount=0;
        this.totalMoney=0;
        if(this.tableData){
          this.tableData.forEach((element) => {
            this.totalCount+=element.count;
            this.totalMoney=this.totalMoney+(element.price*element.count);   
          });
        }
    },
    delSingleGoods(goods) {
      this.tableData = this.tableData.filter(item => item.goodsId != goods.goodsId);
      this.getAllMoney();
    },
    delAllGoods() {
      console.log(111)
      this.tableData = [];
      this.totalCount = 0;
      this.totalMoney = 0;
    },
    // 模拟结账
    checkout() {
      if (this.totalCount!=0) {
        this.tableData = [];
        this.totalCount = 0;
        this.totalMoney = 0;
        this.$message({
            message: '结账成功，谢谢',
            type: 'success'
        });
      }else{
          this.$message.error('不能空结。老板了解你急切的心情！');
      }
    }
  },
  mounted:function(){
      var orderHeight=document.body.clientHeight;
      document.getElementById("order-list").style.height=orderHeight+'px';
  },
  created() {
    axios.get('http://jspang.com/DemoApi/oftenGoods.php')
    .then(res => {
      this.oftenGoods = res.data;
    })
    .catch(error => {
      alert(error)
    });
    axios.get('http://jspang.com/DemoApi/typeGoods.php')
    .then(res => {
      this.type0Goods = res.data[0];
      this.type1Goods = res.data[1];
      this.type2Goods = res.data[2];
      this.type3Goods = res.data[3];
    })
    .catch(error => {
      alert(error)
    });
  }
}
</script>
<style scoped>
  .pos-order {
    background-color: #f9faf9;
    border-right: 1px solid #f3f3f3;
  }
  .btnGroup {
    margin-top: 20px;
  }
  .title{
      height: 20px;
      border-bottom:1px solid #D3DCE6;
      background-color: #F9FAFC;
      padding:10px;
  }
  .often-goods-list ul li{
    list-style: none;
    float:left;
    border:1px solid #E5E9F2;
    padding:10px;
    margin:5px;
    background-color:#fff;
  }
  .o-price{
    color:#58B7FF; 
  }

  .cookList li{
    list-style: none;
    width:23%;
    border:1px solid #E5E9F2;
    height: auot;
    overflow: hidden;
    background-color:#fff;
    padding: 2px;
    float:left;
    margin: 2px;
  }
  .cookList li span{
    display: block;
    float:left;
  }
  .foodImg{
    width: 40%;
  }
  .foodName{
    font-size: 18px;
    padding-left: 10px;
    color:brown;
  }
  .foodPrice{
    font-size: 16px;
    padding-left: 10px;
    padding-top:10px;
  }
  .goods-type {
    clear: both;
  }
</style>

